import { useIntl } from '@umijs/max';
import { Col, Popover, Row, Space } from 'antd';
import React from 'react';
import Styles from './Styles.less';
import { getRealValue } from './tools';

type IProps = {
  stationData: API.StationSafetyWorkIndicators;
};

const Station: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { stationData } = props;
  return (
    <div style={{ width: '100%' }}>
      <div className={Styles.textTitle}>
        <Row gutter={16} style={{ width: '100%' }}>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.technicalIndex' })}</Col>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.efficiency' })}</Col>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.reliability' })}</Col>
        </Row>
      </div>
      <div className={Styles.textContent}>
        <Row gutter={16} style={{ width: '100%', marginTop: '10px' }}>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s13' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.onGrid' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.allOutenergy)}</span>
                  <span>MWh</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s14' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.offGrid' })}</span>
                  <span>=</span>
                  <span className={Styles.values}> {getRealValue(stationData?.allInenergy)}</span>
                  <span>MWh</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s15' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.hours' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.workingHours)}</span>
                  <span>h</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s16' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.utilization' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stationData?.equivalentUtilizationCoefficient)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s17' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.frequency' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stationData?.equivalentDischargeTimes)}
                  </span>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.times' })}</span>
                </Space>
              </Popover>
              {/*<Popover content={'累计调频耗电量，仅调频储能电站统计'}>*/}
              {/*  <Space>*/}
              {/*    <span>调频里程</span>*/}
              {/*    <span>=</span>*/}
              {/*    <span>{stationData?.agcOutenergy || '--'}</span>*/}
              {/*    <span>MW</span>*/}
              {/*  </Space>*/}
              {/*</Popover>*/}
              {/*<Popover*/}
              {/*  content={'储能单元交流测充/放电量的总和显示对应日期范围内能效指标的各项考核内容'}*/}
              {/*>*/}
              {/*  <div>储能单元充/放电量={}</div>*/}
              {/*</Popover>*/}
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s18' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.overEfficiency' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.efficiency)}</span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s19' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.lossRate' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.lossRate)}</span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s20' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.roundtrip' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stationData?.conversionEfficiency)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s21' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.rateToSoh' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.sohValue)}</span>
                  <span>%</span>
                </Space>
              </Popover>
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s22' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.availability' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stationData?.availabilityFactor)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s23' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.utilizationSta' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stationData?.utilizationCoefficient)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s24' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.failureRate' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.failureRate)}</span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s25' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.failureFrequency' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stationData?.rtop)}</span>
                  <span>%</span>
                </Space>
              </Popover>
            </Space>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Station;
